<template>
  <div>
    <el-menu :default-active="activeIndex"
             class="el-menu-vertical-demo"
             :unique-opened="true"
             @select="handleSelect"
             :collapse="menuStore.isCollapsed"
             :collapse-transition="false"
             background-color="#0079FE"
             text-color="#ccc"
             active-text-color="#fff">
      <div style="
          padding: 15px 0;
          display: flex;
          justify-content: center;
          align-items: center;
        ">
        <div class="f18 fb title">兜兜智聘管理平台</div>
        <!-- <img src="../assets/logo.png" style="width: 44px; height: 44px" />
        <span
          v-if="!menuStore.isCollapsed"
          style="color: #fff; fontsize: 16px; margin-left: 12px"
          >ShaoLin</span
        > -->
      </div>
      <sidebar-menu-item v-for="route in menuRoutes"
                         :route="route"
                         :key="route.path"
                         :isCollapsed="menuStore.isCollapsed"></sidebar-menu-item>
    </el-menu>
  </div>
</template>

<script lang="js">
import { computed, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import SidebarMenuItem from "./SidebarMenuItem.vue";
import { useMenuStore } from "@/store/userStore.js";
export default {
  name: "SideBar",
  components: {
    SidebarMenuItem,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const activeIndex = ref(route.path);
    const menuStore = useMenuStore();
    const menuRoutes = computed(() => {
      // 过滤出需要在侧边栏显示的路由
      return router.getRoutes().filter((r) => r.meta && r.meta.showInSidebar);
    });

    const handleSelect = (key) => {
      router.push(key);
    };

    onMounted(() => {
      // 当路由变化时更新激活的菜单项
      router.afterEach((to) => {
        activeIndex.value = to.path;
      });
    });

    return { menuRoutes, activeIndex, handleSelect, menuStore };
  },
};
</script>

<style scoped lang="scss">
.title {
  color: #fff;
  margin: 20px 0;
}
.el-menu-vertical-demo {
  height: 100%;
}
.el-menu-vertical-demo .el-menu-item.is-active {
  background-color: #13527f;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  height: calc(100vh - 0px);
  overflow-y: auto;
}
::v-deep(.el-menu-item) {
  span {
    font-weight: bold;
    font-family: SourceHanSansSC-regular;
    font-size: 14px;
  }
}
::v-deep(.el-sub-menu__title) {
  span {
    font-weight: bold;
    font-family: SourceHanSansSC-regular;
    font-size: 14px;
  }
}
::v-deep(.is-active) {
  background-color: #82bdff !important;
  color: #fff;
}

.el-menu--collapse {
  height: calc(100vh - 0px);
}
</style>
